<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta charset="utf-8" />
	<title>用户注册</title>
	<meta name="Keywords" content="17玩芽-填写孩子资料" />
	<meta name="Description" content="17玩芽-填写孩子资料" />
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
	<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
	<!-- Mobile Devices Support @begin -->
	<meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
	<meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
	<meta content="no-cache" http-equiv="pragma">
	<meta content="0" http-equiv="expires">
	<meta content="telephone=no, address=no" name="format-detection">
	<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- apple devices fullscreen -->
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
	<!-- Mobile Devices Support @end -->

	<script src="./js/jquery.min.js"></script>

	<link rel="stylesheet" href="./style/nyroModal.css" type="text/css" />
	<script src="./js/jquery.Jcrop.js"></script>
	<script src="./js/jquery.color.js"></script>
	<script language="javascript" type="text/javascript" src="./editor/My97DatePicker/WdatePicker.js"></script>
	<script type="text/javascript">

		$(function($){
			$("#target").attr("width",document.body.clientWidth+"px");
			$(".yminput")[0].attr("readonly","readonly");
			$(".yminput")[1].attr("readonly","readonly");
			//$("#target").Jcrop();
/*			$('#target').Jcrop({
				bgFade:     true,
				bgOpacity: .2,
				setSelect: [ 60, 70, 200, 200 ]
			},function(){
				jcrop_api = this;
			});*/
		});
	</script>
	<link rel="stylesheet" href="./css/jquery.Jcrop.css" type="text/css" />

	<style>
		#toast{display:none;z-index: 9001;position:absolute;padding:8px 25px;color:#000000;font-size:16px;background-color: rgba(153,255,255,0.9);box-shadow:0 0 5px #666666;z-index:9999;}
		a:link {
			text-decoration: none;
		}
		a:visited {
			text-decoration: none;
		}
		a:hover {
			text-decoration: none;
		}
		a:active {
			text-decoration: none;
		}
		body{text-align:center;background-color:white}
		#center{
			margin-right:auto;
			margin-left:auto;
			width:100%;
		}

		.regbtn{
			border-radius:10px;
			height:50px;
			width:250px;
			color: white;
			border: solid #F08995 2px;
			background-color: #F08995;
			font-size:22px
		}
		.radioclass{
			background-color:red;border:10px groove #F08995;
			width:20px;height:20px;
			filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=cyan,endColorStr=red);
		}
		.mask {
			position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
			z-index: 1002; left: 0px;
			opacity:0.5; -moz-opacity:0.5;
		}
	</style>
</head>

<center>
	<body ondragstart="return false;width:100%">
	<form action="uploadFile.php"  name="uploadForm" id="uploadForm" style="display: none">
		<input type="file" name="head_pic" id="head_pic" style="display: none" onchange="">
		<input type="text" id="x" name="x">
		<input type="text" id="y" name="y">
		<input type="text" id="w" name="w">
		<input type="text" id="h" name="h">
		<input type="text" id="showW" name="showW">
		<input type="text" id="showH" name="showH">
	</form>

	<form action="./childAdd.php" method="post" name="formsignup" id="formsignup">
		<div id="center">
			<br>

			<div style="-webkit-transform:translate3d(0,0,0);width:100%;" onclick="$('#head_pic').click();">
				<svg id="svgCircleTutorial" height="130" width="130" xmlns="http://www.w3.org/2000/svg">
					<defs>
						<pattern id="raduisImage" patternUnits="userSpaceOnUse" width="120" height="120">
							<image xlink:href="./img/reg/jia.png" id="head_pic_show" x="0" y="0" width="120" height="120" />
						</pattern>
					</defs>
					<circle id="myCircle" cx="62" cy="62" r="60" fill="url(#raduisImage)"  stroke="#F08995" stroke-width="0" />
				</svg>
				<!--<img src="./img/reg/jia.png"  class="img" />-->
			</div>
		</div>
		<div style="-webkit-transform:translate3d(0,0,0);width:100%;text-align:center;">
				<table class="kuang" border="0" cellpadding="10px" cellspacing="0" width="100%">
					<tr>
						<td>填写孩子资料<br></td>
					</tr>
					<tr>
						<td>昵称 / <input type="text" name="nickname" id="nickname" style="width: 90px;border: none" placeholder="请输入昵称"></td>
					</tr>
					<tr>
						<td>生日 / <input type="text" readonly="readonly" style="width: 90px;border: none" placeholder="请选择生日"  name="birthday" id="birthday" onClick="WdatePicker({dateFmt:'yyyy-MM-dd',enableInputMask:false,enableKeyboard:false})"></td>
					</tr>
					<tr>
						<td>性别 / <input class="radioclass" name="sex" type="radio" value="0" checked="checked"/>男<input name="sex" class="radioclass" type="radio" value="1" />女</td>
					</tr>
					<tr>
						<td>就读学校 / <input type="text" name="school" id="school" style="width: 120px;border: none" placeholder="请输入就读学校"></td>
					</tr>
					<tr>
						<td><br>你的身份 / <select style="background-color: #F08995;border-radius: 5px;color:#666666;height: 20px" name="identify_label">
								<option value ="3" selected>爸爸</option>
								<option value ="4">妈妈</option>
							</select>  </td>
					</tr>
				</table>
			</div>
			<div style="-webkit-transform:translate3d(0,0,0);width:100%;">
				<br>
				<button class="regbtn" type="button" onclick="formCheck();">OK</button>
			</div>
		</div>
		<input name="openid" value="<?php echo $userData["openid"];?>" type="hidden">

		<input name="head_img_url" id="head_img_url" type="hidden">
	</form>
	<div id="mask" class="mask" style="display: none;text-align: center;vertical-align: middle">
		<img src="./img/ajaxLoader.gif" style="width: auto;margin-top: 200px">
	</div>

	</body>
</center>
<div id="toast"></div>
<div id="JcropImage" style="display: none;align-content: center">
	<button onclick="uploadFile()">确认</button>
	<img src="./img/reg/jia.png" id="target" alt="Jcrop Image"/>
</div>
<script type="text/javascript">
	var width = document.body.clientWidth;
var jcrop_api;
	var hwm=function(id){ return document.getElementById(id);};
	String.prototype.len=function(){return this.replace(/[^\x00-\xff]/g,"aa").length;};
	String.prototype.trim=function(){return this.replace(/(^ *)|( *$)/g, "");};
	String.prototype.encode=function(){return escape(this.replace(/·/g," ")).replace(/\+/g,"%2B");};
	String.prototype.left=function(length){
		if(this.len()>length){
			var _temp=this;
			_temp=_temp.replace(/([^\x00-\xff])/g,"$1>");
			_temp=_temp.substring(0,length-2)+"..";
			return _temp.replace(/>/g,"");
		}else{
			return this.toString();
		}
	};
	Element.prototype.show=function(){this.style.display="block";};
	Element.prototype.hide=function(){this.style.display="none";};
	Element.prototype.center=function(top){
		this.style.left=(_system._scroll().x+_system._zero(_system._client().bw-this.offsetWidth)/2)+"px";
		this.style.top=(top?top:(_system._scroll().y+_system._zero(_system._client().bh-this.offsetHeight)/2))+"px";
	};
	var _system={
		_client:function(){
			return {w:document.documentElement.scrollWidth,h:document.documentElement.scrollHeight,bw:document.documentElement.clientWidth,bh:document.documentElement.clientHeight};
		},
		_zero:function(n){
			return n<0?0:n;
		},
		_scroll:function(){
			return {x:document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft,y:document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop};
		},
		_guide:function(click){
			this._cover(true);
			hwm("guide").show();
			hwm("guide").style.top=(_system._scroll().y+5)+"px";
			window.onresize=function(){_system._cover(true);hwm("guide").style.top=(_system._scroll().y+5)+"px";};
			if(click){hwm("guide").onclick=("cover").onclick=function(){
				_system._cover();
				hwm("guide").hide();
				hwm("cover").onclick=null;
				hwm("guide").onclick=null;
				window.onresize=null;
			};}
		},
		_toast:function(text,fun){
			hwm("toast").show();

			hwm("toast").innerHTML=text;

			hwm("toast").center(100);

			setTimeout(function(){
				hwm("toast").hide();
				hwm("_DialogBGMask").hide();
				if(fun){(fun)();}
			},3*1000);
		}
	}

	function showMask(){
		$("#mask").css("height",$(document).height());
		$("#mask").css("width",$(document).width());
		$("#mask").show();
	}
	//隐藏遮罩层
	function hideMask(){

		$("#mask").hide();
	}



	function formCheck()
	{



		var nickname = hwm("nickname").value;
		var birthday = hwm("birthday").value;

		var school = hwm("school").value;

		var head_img_url = hwm("head_img_url").value;

		if(head_img_url=="")
		{
			_system._toast("请上传头像！");
			return;
		}


		if(nickname=="")
		{
			_system._toast("请输入昵称！");
			return;
		}
		if(birthday=="")
		{
			_system._toast("请选择生日！");
			return;
		}
		if(school=="")
		{
			_system._toast("请输入就读学校！");
			return;
		}
		hwm("formsignup").submit();
	}
	function uploadFile()
	{
		var formData = new FormData($( "#uploadForm" )[0]);
		// 上传中
		$("#nyroModal").click();
		showMask();
		$.ajax({
			url: './uploadFile.php' ,
			type: 'POST',
			data: formData,
			async: false,
			cache: false,
			contentType: false,
			processData: false,
			success: function (returndata) {
				$("#JcropImage").hide();
				$("#formsignup").show();
				$("#myCircle").attr('stroke-width',2);
				$("#head_pic_show").attr('xlink:href',returndata);
				$("#head_img_url").val(returndata);
				jcrop_api.destroy();
				// 上传成功
				hideMask();
			},
			error: function (returndata) {
				alert(returndata);
			}
		});
	}

	document.querySelector('#head_pic').onchange = function (evt) {
		var files = evt.target.files;

		for(var i = 0, f; f = files[i]; i++){
			if(!f.type.match('image.*')) continue;

			var reader = new FileReader();
			reader.onload = (function(theFile){
				return function(e){
					$("#JcropImage").show();
					$("#formsignup").hide();
					$("#target").attr('src',e.target.result);
					$("#target").Jcrop({
						allowResize:true,
						allowSelect:false,
						aspectRatio:1,
						bgFade:     true,
						bgOpacity: .2,
						onSelect: updateCoords,
						setSelect: [ 100, 100, 300,300 ]
					},function(){
						jcrop_api = this;
						$('#showW').val(jcrop_api.getWidgetSize()[0]);
						$('#showH').val(jcrop_api.getWidgetSize()[1]);
					});
				}
			})(f);
			reader.readAsDataURL(f);
		}
	}
	function updateCoords(c){
		$('#x').val(c.x);
		$('#y').val(c.y);
		$('#w').val(c.w);
		$('#h').val(c.h);
	};
</script>
</html>


